<script>
import {defineComponent} from 'vue'
import {changeGk, delGk, getGk, saveGk} from "@/api/api";
import {Message} from "element-ui";
import { EventBus } from "@/tools/bus";
import { wsSend } from "@/tools/sendMessage";

export default defineComponent({
    name: "sysGongKuang",
    data() {
        return {
            loading:null,
            canSave:true,
            canLoad:true,
            ws:'',
            localsysGongKuang: false,
            selectJiaoAn: '',
            gongKuangData:{
                gkDesc:'',
                name:''
            },
            gKList:[],
            selectedRows:{
                id:'',
                createTime:'',
                gkDesc:''
            },
            selectedIndex:'',
            changeGongkuang:false,
        }
    },
    props: {
        sysGongKuang: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        EventBus.$on('ws-message', (data) => {
            if (data.cmd === 'saveGongKuang') {
                this.$message.success('保存成功')
                this.canSave=true
                this.gongKuangData.gkDesc=''
                this.getGkList();
            }
            if (data.cmd === 'loadGongKuang'){
                this.loading.close();
                this.canLoad=true
                this.$message.success('加载成功')
            }
        });
    },
    beforeDestroy() {
        EventBus.$off('ws-message');
    },
    watch: {
        sysGongKuang(newVal) {
            this.localsysGongKuang =newVal
            if (newVal){
              this.getGkList();
            }
        }
    },
    methods:{
        close() {
            this.clearData()
            this.$emit('DialogClose')
        },

        handleRowClick(row){
            this.selectedRows = JSON.parse(JSON.stringify(row));
        },
        changedesc(){
            if (this.selectedRows.id){
                this.changeGongkuang = true
            }else {
                this.$message.error('请选择一个工况')
            }

        },
        clearData(){
            this.jiaoanDesc = ''
            this.selectedRows = {
                id:'',
                time:'',
                gkDesc:''
            }
            this.changeGongkuang = false
            this.selectedIndex=''

        },
        closeChangeModal(){
          this.changeGongkuang = false
        },
       async saveGongKuang(){
            if (this.canSave){
                if (this.gongKuangData.gkDesc!==''){
                    this.canSave = false
                    this.gongKuangData.name=this.gongKuangData.gkDesc
                   wsSend({
                        "cmd":"saveGongKuang",
                        "name":this.gongKuangData.name,
                        "gkDesc":this.gongKuangData.gkDesc
                    })
                }else{
                    this.$message.error('请输入描述')
                }
            }else{
                this.$message.error('保存中，请勿频繁点击')
            }

        },
        async getGkList(){
            const res= await getGk();
          if (res.data.code===200){
              this.gKList=res.data.data
              this.gKList.forEach((item,index)=>{
                  item.index=index;
              })
          }else{
              this.$message.error('获取工况失败,请检查网络设置')
          }

        },
        loadingGongKuang(){
            if (this.canLoad){
                if (!this.selectedRows.id){
                    this.$message.error('请选择一个工况')
                    return
                }
                this.canLoad=false
                this.loading=Message({
                    message: '加载中......',
                    duration: 0,
                    type: 'info',
                })
                const params={
                    "cmd":"loadGongKuang",
                    "id":this.selectedRows.id
                }
              wsSend(params)
            }else{
                this.$message.error('加载中，请勿频繁点击')
            }

        },
        async changeGK(){
            const params={
                id:this.selectedRows.id,
                gkDesc:this.selectedRows.gkDesc,
                name:this.selectedRows.gkDesc,
            }
            //判断params每一项是否不为空
            if (Object.values(params).every(item=>item!=='')){
                const res= await changeGk(params);
                if (res.data.code===200){
                    this.$message.success('修改成功')
                   this.clearData();
                    await this.getGkList();
                }
            }else{
                this.$message.error('请输入描述')
            }
        },
        async removeGk(){
            if (this.selectedRows.id){
                const params={
                    id:this.selectedRows.id,
                }
                const res= await delGk(params);
                if (res.data.code===200){
                    this.$message.success('删除成功')
                    this.clearData();
                    await this.getGkList();
                }
            }else{
                this.$message.error('请选择一个工况')
            }


        }
    }
})
</script>

<template>
    <el-dialog title="系统工况" :visible.sync="localsysGongKuang" width="50rem" @close="close" custom-class="switchPatrolDialog"  >
        <div class="main" style="text-align: center">
            <div>
                <span>描述：</span>
                <el-input v-model="gongKuangData.gkDesc" style="width: 40rem"></el-input>
            </div>
            <div class="btns">
                <el-button @click="loadingGongKuang" :disabled="!canLoad">加载</el-button>
                <el-button @click="saveGongKuang" :disabled="!canSave" v-permission="['admin','teacher']">保存</el-button>
                <el-button @click="changedesc" v-permission="['admin','teacher']">修改描述</el-button>
                <el-button  @click="removeGk" v-permission="['admin','teacher']">删除</el-button>
            </div>
        </div>
        <div class="jiaoanList">
            <el-table :data="gKList"  @row-click="handleRowClick" height="250">
                <el-table-column label="选择" width="36">
                    <template #default="scope">
                        <el-radio
                            v-model="selectedIndex"
                            :label="scope.row.index"
                        ></el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="id" width="80" prop="id" align="center" header-align="center" >
                </el-table-column>
                <el-table-column label="时间" width="180" prop="createTime" align="center" header-align="center">
                </el-table-column>
                <el-table-column label="描述" width="453" prop="gkDesc" align="center" header-align="center">
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="修改描述" :visible.sync="changeGongkuang" width="50rem" custom-class="switchPatrolDialog" append-to-body>
            <div>
                <span>I D：</span>
                <el-input v-model="selectedRows.id" style="width: 40rem;margin-left: .6rem" disabled></el-input>
            </div>
            <div style="margin-top: 1rem">
                <span>时间：</span>
                <el-input v-model="selectedRows.createTime" style="width: 40rem" disabled></el-input>
            </div>
            <div style="margin-top: 1rem" >
                <span >描述：</span>
                <el-input v-model="selectedRows.gkDesc" style="width: 40rem" autofocus></el-input>
            </div>
            <div class="btns">
                <el-button @click="changeGK">确定</el-button>
                <el-button @click="clearData">取消</el-button>
            </div>
        </el-dialog>
    </el-dialog>
</template>

<style scoped lang="less">
span,fieldset{
    color: white;
    font-size: 1.1rem;
}
.btns{
    width: 42rem;
    margin: 1rem auto;
    display: flex;
    justify-content: space-between;
    >.el-button{
        width: 10rem;
    }
}

.el-button {
    color: #ebeff0;
    background: linear-gradient(#176575, #07283f);
    border: 0;
    box-shadow: 0 -2px 0 rgba(16, 164, 195, 0.8);
    width: 8rem;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        background: linear-gradient(#1a7384, #083850);
        box-shadow: 0 -2px 0 rgba(16, 164, 195, 1);
    }

    &:active {
        background: linear-gradient(#145c66, #06283a);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        transform: translateY(1px);
    }

    &:disabled {
        color: #b2b6b7;
        background: linear-gradient(#4a4d4e, #2c2f30);
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
    }
}


:deep(.el-input__inner) {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
:deep(.is-disabled .el-input__inner){
    background-color: #131f2a;
    border-color: rgba(255, 255, 255, 0.2);
    color: #999;
}
/* 自定义 el-table 列单元格背景为透明 */
/deep/ .el-table .el-table__body tr {
    background-color: transparent !important; /* 设置行的背景为透明 */
}


/* 修改单元格边框颜色为透明 */
/deep/ .el-table th, .el-table td {
    border-color: #999 !important;
}
/deep/ .el-table th.el-table__cell{
    background-color: rgb(2, 22, 42) !important;
    color: #fff !important;
    font-weight: 700;
}
</style>
